﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ICD Browse</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!--Style-->
    <link href="./styles/kendo.common.min.css" rel="stylesheet" />
    <link href="./styles/kendo.default.min.css" rel="stylesheet" />
    <link href="./styles/kendo.mobile.all.min.css" rel="stylesheet" />
    
    <!--Script-->
    <link href="./myCSS/common.css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/kendo.mobile.min.js"></script>
    <script src="./myScripts/common.js"></script>
    <script src="./myScripts/networkChecking.js"></script>
    <script src="./myScripts/hippa.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/kendo.all.min.js"></script>
</head>
<body>

    <div id="mainICDTab" data-role="view" data-title="ICD" data-layout="hospital-layout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title">Main menu</span>
                <!--<a data-align="left" data-role="button" data-click="onNavigateBackToLogin">Back</a>
                <a data-align="right" data-role="button" data-click="onNavigateToManagePatient">Add Patient</a>-->
            </div>
        </header>

        <p>ICD 9:<input readonly="true" id="hospitalPhoneNumberText" class="labelText" /></p>
        <ul data-role="listview" data-type="group" data-style="inset" data-click="onNavigateICD9List">
            <li>
                <ul>
                    <li>
                        <a>
                            <input readonly="true" data-icon="toprated" id="hospitalText" class="labelText" style="width: 90%;font-weight: bold" />
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

        <div>
            <p>ICD 10:</p>
            <ul data-role="listview" data-style="inset" data-type="group" data-click="onNavigateICD10List">
                <li>
                    <ul>
                        <li>
                            <a>
                                <input readonly="true" id="providerHospitalText" class="labelText" style="width: 90%" />
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <p />

        <div data-role="footer">
            <div data-role="tabstrip">
                <a data-role="button" data-click="onDischargeTab" data-icon="organize">
                    <!--<img src="images/Public-Documents-32.png"
                         height="40" width="40" />-->
                    Browse
                </a>
                <a data-role="button" data-click="onDischargeTab" data-icon="search">
                    <!--<img src="images/Search.png"
                    height="40" width="40" />-->
                    Search
                </a>
                <a data-role="button" data-click="onNavigateCensusMain" data-icon="toprated">Favorite</a>
                <a data-role="button" data-click="onNavigateCensusMain" data-icon="more"></a>
            </div>
        </div>
    </div>

    <div id="ICDListTab" data-role="view" data-title="Chapters" data-layout="hospital-layout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title">Chapters</span>
                <a data-align="left" data-role="button" href="#mainICDTab">Menu</a>
            </div>
        </header>

        <div>
            <ul class="hospitalDischargeListView" data-role="listview" data-style="inset" data-template="hospital-template" data-source="hospitalDataSource" data-click="onHospitalItemClicked">
                <li>
                    <ul>
                        <li>
                            <a data-icon="favorites">
                                <input readonly="true" id="providerHospitalText" class="labelText" style="width: 90%" />
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div id="mainHospitalTab1" data-role="view" data-title="Census Hospital" data-layout="hospital-layout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title">Menu</span>
                <a data-align="left" data-role="button" data-click="onNavigateBackToLogin">Back</a>
                <a data-align="right" data-role="button" data-click="onNavigateToManagePatient">Add Patient</a>
            </div>
        </header>


        <!--<p>Hospital: <input readonly="true" id="hospitalPhoneNumberText" class="labelText" /></p>
        <ul data-role="listview" data-type="group" data-style="inset" data-click="onNavigateHospitalList">
            <li>
                <ul>
                    <li>
                        <a>
                            <input type="text" placeholder="Chapter" data-bind="value: ChapterName" class="labelText" />
                        </a>
                    </li>
                </ul>
            </li>
        </ul>-->
    </div>

    <div id="ICDChapterDetailsTab" data-role="view" data-layout="hospital-layout">
        <header data-role="header">
            <div data-role="navbar" id="icd9ChapterHeaderNavBar">
                <span id="chapterDetailHeader" data-role="view-title">Header Details</span>
                <a data-align="left" data-role="button" href="#ICDListTab">Back</a>
                <!--  <a data-align="right" data-role="button" data-icon="favorites" data-click="onFavoriteClick">Favorite</a>-->
            </div>
        </header>

        <p id="incLabel" style ="color: chartreuse;" >
            Includes:
            <br />
            <input readonly="true" id="IncludesLabel" class="labelText" style="width:100%" />
        </p>

        <!--<ul>
            <li id="IncludesLabel">
                Disp Date:
                <input readonly="true" data-bind="value: Name" class="labelText" />
            </li>
        </ul>-->
        <p id="addLabel" style="color: burlywood;">
            Use additional:
            <br />
            <input readonly="true" id="AdditionalLabel" class="labelText" style="width:100%" />

        </p>

        <p id="excLabel" style="color: crimson;">
            Excludes:
            <br />
            <a>
                <input readonly="true" id="ExecuteLabel" class="labelText" style="width:100%" />
            </a>
        </p>

        <p>
            Chapter contains:
            <br />
            <ul class="chapterDetailsListView" data-role="listview" data-template="chapter-template" data-source="chapterDetailsDataSource" data-click="onICDChapterDetailsClicked">
                <li>
                    <ul>
                        <li>
                            <a>
                                <input readonly="true" id="hospitalText" class="labelText" style="width: 90%;font-weight: bold" />
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </p>
        
        <!--<div data-role="footer">
            <div data-role="navbar" id="censusFooter">
                <a data-role="button" data-icon="favorites" data-click="onFavoriteClick" style="width: 95%">Favorite</a>
            </div>
        </div>-->
    </div>
    
    
    <!--ICDChapterHeaderTab-->
    <div id="ICDChapterHeaderTab" data-role="view" data-title="Chapters Header" data-layout="hospital-layout">
        <header data-role="header">
            <div data-role="navbar" id="icdChapterDetailNavBar">
                <a data-align="left" data-role="button" href="#ICDListTab">Back</a>
                <span id="chapterDetailHeader" data-role="view-title">Header Details</span>
            </div>
        </header>

        <p>
            Chapter Header:
            <ul class="chapterHeaderListView" data-role="listview" data-template="chapter-template" data-source="chapterHeaderDataSource" data-click="onICDDetailsClicked">
                <li>
                    <ul>
                        <li>
                            <a>
                                <input readonly="true" id="hospitalText" class="labelText" style="width: 90%;font-weight: bold" />
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </p>
    </div>

    <div id="ICDDetailsTab" data-role="view" data-title="Chapters Header">
        <header data-role="header">
            <div data-role="navbar">
                <a data-align="left" data-role="button" href="#ICDListTab">Back</a>
                <span id="chapterDetailHeader" data-role="view-title">Header Details</span>
            </div>
        </header>

        <div>
            <p>
                ICD Details:
                <ul class="icdDetailsListView" data-role="listview" data-template="chapter-template" data-source="icdDetailsDataSource">
                    <li>
                        <ul>
                            <li>
                                <a data-role="button" data-badge="10" data-click="AddFunction">Add</a>

                            </li>
                        </ul>
                    </li>
                </ul>
</p>
        </div>

    </div>

    <!--#region Error-->
    <div id="error-view" data-role="modalview" style="width: 95%; height: 16em;">
        <div class="error-header" data-role="header">
            <div data-role="navbar">
                <span>Error</span>
            </div>
        </div>

        <div data-role="footer">
            <div data-role="navbar" id="censusFooter" align=CENTER>
                <a data-click="closeError" class="tabfooter" data-role="button" style="width: 90%">Close</a>
            </div>
        </div>
        <div class="message" style="margin: 5px"></div>
    </div>
    <!--#endregion-->

    <script type="text/x-kendo-template" id="hospital-template">
        <a>
            <p style="color: orange; font-size: larger; margin: 0">#: ChapterName #</p>
            <p style="margin: 0; font-size: small; font-weight: 300; ">#: Name #</p>
            <p style="margin: 0; font-size: small; font-weight: 300; ">(#: Include #)</p>
        </a>
    </script>

    <script type="text/x-kendo-template" id="chapter-template">
        <a>
            <p><span style="text-decoration: underline;">#: ChapterContainID #</span> <span style="font-size: small;"> #: Description #</span></p>
        </a>
    </script>
    <script type="text/x-kendo-template" id="header-template">
        <a>
            <p class="item-info">#: Header # <span style="font-size: small;">#: Description #</span></p>
        </a>
    </script>

    <script type="text/x-kendo-template" id="details-template">
        <!--<ul data-role="listview" data-style="inset">
            <li>-->
        <p class="item-info">#: Header # <span style="font-size: small;">#: Description #</span></p>
        <!--</li>
        </ul>-->
    </script>

    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    <script>

        var hospitalDataSource;
        var chapterDetailsDataSource;
        var currentChapter;
        var currentChapterHeader;
        var currentChapterDetail;
        var chapterHeaderDataSource;
        var icdDetailsDataSource;
        function onNavigateICD10List(e) {
            if (!isOnline()) {
                showAlert("No network connection available. Please try again when online.");
                return;
            }

            window.kendoMobileApplication.showLoading();

            $.ajax({
                url: endPoint + '/ICD10Chapter',
                type: 'GET',
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {

                    hospitalDataSource = new kendo.data.DataSource({
                        data: data.value
                    });

                    $(".hospitalDischargeListView").kendoMobileListView({
                        dataSource: hospitalDataSource,
                        template: kendo.template($("#hospital-template").html())
                    });


                    window.kendoMobileApplication.hideLoading();
                }, error: function (data) {
                    showAlert("Server error ", data);
                    window.kendoMobileApplication.hideLoading();
                }
            });

            window.kendoMobileApplication.navigate(
                '#ICDListTab',
                'slide:left');
        }

        function onHospitalItemClicked(e) {

            if (!isOnline()) {
                showAlert("No network connection available. Please try again when online.");
                return;
            }
            ////click: function onHospitalClicked(e) {
            ////    var data = hospitalDataSource.view();
            ////    window.kendoMobileApplication.hideLoading();
            ////    currentChapter = data;
            ////    //kendo.bind($('#addToCensusTab'), currentChapter);
            ////
            ////    $('.IncludesLabel').val(' ' + currentChapter.Name);
            ////    window.kendoMobileApplication.navigate(
            ////   '#ICDChapterDetailsTab',
            ////   'slide:left');
            ////    //var currentHospital = data[$(e.item).index()];
            ////}

            var data = hospitalDataSource.view();
            currentChapter = data[$(e.item).index()];

            //hospitalIndex = $(e.item).index();
            kendo.bind($('#ICDChapterDetailsTab'), currentChapter);
            debugger;
            if (currentChapter.Incl == null || currentChapter.Incl == "") {
                $("#IncludesLabel").hide();
                $("#incLabel").hide();
            } else {
                $("#IncludesLabel").show();
                $("#incLabel").show();
                $('#IncludesLabel').val(currentChapter.Incl);
            }
            
            if (currentChapter.Additional ==  null || currentChapter.Additional == "") {
                $("#AdditionalLabel").hide();
                $("#addLabel").hide();
            } else {
                $("#AdditionalLabel").show();
                $("#addLabel").show();
                $('#AdditionalLabel').val(currentChapter.Additional);
            }
            
            if (currentChapter.Excl == null || currentChapter.Excl == "") {
                $("#ExecuteLabel").hide();
                $("#excLabel").hide();
            } else {
                $("#ExecuteLabel").show();
                $("#excLabel").show();
                $('#ExecuteLabel').val(currentChapter.Excl);
            }
            
            $("#icd9ChapterHeaderNavBar span").text(currentChapter.ChapterName);
            $("#icd9ChapterHeaderNavBar a").text("Back");
            ////$("#navbar").data("kendoMobileNavBar").Title("MyCustomTitle");
            var parameter = { "ChapID": currentChapter.ChapID };
            $.ajax({
                url: endPoint + '/ICDChapterContain/GetChapterContainByChapID',
                type: 'POST',
                data: JSON.stringify(parameter),
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {

                    chapterDetailsDataSource = new kendo.data.DataSource({
                        data: data.value
                    });

                    $(".chapterDetailsListView").kendoMobileListView({
                        dataSource: chapterDetailsDataSource,
                        template: kendo.template($("#chapter-template").html())
                    });

                    window.kendoMobileApplication.hideLoading();
                }, error: function (data) {
                    showAlert("Server error ", data);
                    window.kendoMobileApplication.hideLoading();
                }
            });

            //$('#hospitalText').val(currentHospital.HospitalName + " :" + currentHospital.TotalPatient);
            //$('#hospitalPhoneNumberText').val(currentHospital.MainPhoneNumber);
            //$('#hospitalDischarge').val(currentHospital.HospitalName + " :" + currentHospital.TotalPatient);
            window.kendoMobileApplication.navigate(
                '#ICDChapterDetailsTab',
                'slide:left'
            );
        }

        function onICDChapterDetailsClicked(e) {
            if (!isOnline()) {
                showAlert("No network connection available. Please try again when online.");
                return;
            }

            var data = chapterDetailsDataSource.view();
            currentChapterHeader = data[$(e.item).index()];

            var parameter = { "ID": currentChapterHeader.ID };
            
            $("#icdChapterDetailNavBar span").text(currentChapterHeader.ChapterContainID);
            $("#icdChapterDetailNavBar a").text("Back");

            $.ajax({
                url: endPoint + '/ICDDetail/GetICDHeaderChapID',
                type: 'POST',
                data: JSON.stringify(parameter),
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {

                    chapterHeaderDataSource = new kendo.data.DataSource({
                        data: data.value
                    });

                    $(".chapterHeaderListView").kendoMobileListView({
                        dataSource: chapterHeaderDataSource,
                        template: kendo.template($("#header-template").html())
                    });

                    window.kendoMobileApplication.hideLoading();
                }, error: function (data) {
                    showAlert("Server error ", data);
                    window.kendoMobileApplication.hideLoading();
                }
            });

            window.kendoMobileApplication.navigate(
                '#ICDChapterHeaderTab',
                'slide:left'
            );
        }

        function onICDDetailsClicked(e) {
            if (!isOnline()) {
                showAlert("No network connection available. Please try again when online.");
                return;
            }

            var data = chapterHeaderDataSource.view();
            var currentDetail = data[$(e.item).index()];

            var parameter = { "ParentID": currentDetail.Header };

            $.ajax({
                url: endPoint + '/ICDDetail/GetICDHeaderByParent',
                type: 'POST',
                data: JSON.stringify(parameter),
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {

                    icdDetailsDataSource = new kendo.data.DataSource({
                        data: data.value
                    });

                    $(".icdDetailsListView").kendoMobileListView({
                        dataSource: icdDetailsDataSource,
                        template: kendo.template($("#details-template").html())
                    });

                    window.kendoMobileApplication.hideLoading();
                }, error: function (data) {
                    showAlert("Server error ", data);
                    window.kendoMobileApplication.hideLoading();
                }
            });

            window.kendoMobileApplication.navigate(
                '#ICDDetailsTab',
                'slide:left'
            );
        }

        function onFavoriteClick() {
            alert("fav");
        }
    </script>

    <!--#region Erorr Handler -->
    <script>
        var isShownAlert = false;
        function showAlert(message, error) {
            ////console.log(message, error);
            ////try {
            if (!isShownAlert) {
                var errorMessage = message + "\n" + (error === undefined ? "" : "\n" + error.status + ": " + error.statusText);
                $("#error-view .error-header").show();
                $("#error-view .message").text(errorMessage);
                $("#error-view").show().data().kendoMobileModalView.open();
                isShownAlert = true;
            }
            ////} catch (e) {
            ////    console.log(e);
            ////}
        }
        function closeError() {
            $("#error-view").data().kendoMobileModalView.close();
            isShownAlert = false;
        }

        var _onRequestStart = function (event) {
            if (!isOnline()) {
                showAlert("No network connection available. Please try again when online.");
                event.preventDefault();
                return false;
            }
        }

        ////window.setInterval(function () {
        ////    if (!isOnline() && !isShownAlert) {
        ////        showAlert("No network connection available. Please try again when online.");
        ////    }
        ////}, 10000);
    </script>
</body>
</html>
